/*
 * Copyright 2018 Expedia Group
 *
 *       Licensed under the Apache License, Version 2.0 (the "License");
 *       you may not use this file except in compliance with the License.
 *       You may obtain a copy of the License at
 *
 *           http://www.apache.org/licenses/LICENSE-2.0
 *
 *       Unless required by applicable law or agreed to in writing, software
 *       distributed under the License is distributed on an "AS IS" BASIS,
 *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *       See the License for the specific language governing permissions and
 *       limitations under the License.
 *
 */

@import (reference) '../../../app';

.time-pointer {
  fill: @gray-dark;
}

.time-pointer-line {
  stroke: @gray-light;
  stroke-width: 1;
  stroke-opacity: 0.5;
}

.timeline-transition {
  transition: y 0.2s;
}

.service-expand-pill {
  fill: white;
  stroke: @gray-dark;
  stroke-width: 1.5;
  opacity: 1;
  rx: 3;
  ry: 3;
  &:hover {
    cursor: pointer;
  }
}

.service-expand-text {
  font-weight: 400;
  font-size: @font-size-h5;
  fill: @gray-dark;
  &:hover {
    cursor: pointer;
  }
}

.span-service-label {
  font-weight: 600;
  fill: white;
}

.span-click {
  opacity: 0;
  fill: @gray;
  &:hover {
    opacity: 0.14;
    cursor: pointer;
  }
}

.span-row {
  fill: white;
}

.service-pill {
  fill-opacity: 1;
  rx: 3;
  ry: 3;
}

.span-label {
  font-weight: 400;
  font-size: @font-size-base;
  cursor: default;
  fill: @gray-dark;
}

.span-label_failure {
  fill: @brand-danger;
}

.span-bar {
  fill: @gray-dark;
  rx: 4;
  ry: 4;
}

.span-bar_client {
  fill: @gray-mid-lighter;
}

.span-bar_failure {
  fill: @brand-danger;
}

.invocation-line {
  stroke: @gray-mid-light;
  stroke-width: 2;
  stroke-dasharray: 3, 5;
}

.trace-details-nav {
  font-size: @font-size-large;
  ul > li > a {
    padding: 0 18px 3px 18px;
    &:focus {
      outline: 0;
    }
  }
}

.trace-details-timeline {
  padding-top: 18px ;
}

.traces-details-trace-id__name {
  font-weight: 600;
}

.traces-details-trace-id__value {
  font-family: @font-family-monospace;
  font-size: @font-size-large;
  font-weight: normal;
}

.react-bs-table .table-row-details table.latency-summary {
  font-size: 14px;

  tr {
    border: 0;
    &:hover td {
      background-color: @gray-lighter !important;
      color: @gray-darker !important;
      cursor: auto !important;
    }
  }
  td {
    padding: 0 12px 3px 0;
  }
}

.latency-summary__primary-info {
  font-weight: 800;
  margin-right: @spacing-s;
}

.dc-marker {
  margin-right: @spacing-s;
  padding: 0 @spacing-xs 0 @spacing-xs;
  border-radius: @spacing-xxs;
  border-width: 1px;
  border-style: solid;
}

.trace-details-tabs {
  margin-top: @spacing-m;
}

.trace-trend-table {
  width: 100%;
}

.trace-trend-table_header {
  border-bottom: 2px solid @gray-mid-light;
}

.trace-trend-table_cell {
  padding: @spacing-s @spacing-s @spacing-xs @spacing-s;
}

.trace-trend-table_op-name {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 6px;
}

.btn:disabled {
  opacity: 1;
}